<html>
    <head>
        <meta charset="utf-8">
        <title>线长度(大圆)量算控件</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet.js"></script>

        <!-- 1.添加PolylineMeasure插件的js和css引用 -->
        <script type="text/javascript" src="../lib/plugins/control/Leaflet.PolylineMeasure.js"></script>
        <link rel="stylesheet" type="text/css" href="../lib/plugins/control/Leaflet.PolylineMeasure.css">


        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>

<script type="text/javascript">
    var map = null; 

    function init(){

        map = L.map("mapDiv")
               .setView([0,0], 2);

        L.tileLayer(
            'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        ).addTo(map);

        // 2.定义control的参数
        var options = {
            position    : "topleft",        //位置
            unit        : "meter",          //量算单位
            showBearings : true, 
            clearMeasurementOnStop: false,  //量算结束后，不清空度量
            showMeasurementsClearControl : true,//显示清空控件
            showUnitControl : true          //显示单位控件
        };

        // 3.创建control并添加到map上
        L.control.polylineMeasure(options).addTo(map);
    }
</script>
    


